
import { memo, useEffect, useMemo, useRef, useState } from 'react';
import * as echarts from 'echarts';
import classNames from 'classnames';
import { isObject } from '@multi-kit/inspect'

interface Option {
  label: string;
  value: any;
}

export interface Props {
  checkedChildren?: string | Option;
  unCheckedChildren?: string | Option;
  value: '',
  defaultChecked: '',
  defaultValue: '',
  onChange: Event
}

function SwitchButton<Props>(props: Props) {
  const { checkedChildren, unCheckedChildren, onChange } = props;
  const result = isObject(checkedChildren) ? checkedChildren.value === props.value : checkedChildren === props.value

  const [state, setState] = useState(result)

  useMemo(() => {
    const result = isObject(checkedChildren) ? checkedChildren.value === props.value : checkedChildren === props.value
    setState(result)
  }, [props])



  const changeAction = (event) => {
    setState(event.target.checked)
    const checked = event.target.checked
    onChange && onChange(checked ? checkedChildren.value : unCheckedChildren.value)
  }



  return (
    <label className="cursor-pointer select-none gap-2 inline-block">
      <input type="checkbox" className="peer hidden" checked={state} onChange={changeAction} />
      <div
        className="rounded border border-gray-400 px-3 py-1 flex items-center justify-center
           transition-all duration-200
           peer-checked:bg-blue-500 peer-checked:border-blue-500"
      >
        <div>
          {
            state ? checkedChildren?.label : unCheckedChildren?.label
          }
        </div>
      </div>
    </label>
  );
}

export default memo(SwitchButton)